<template>
	<view class="content">
		<image style="width: 100%;height:144px;" src="../image/dly.jpg"></image>
		<view class="nr-i" style="width: 100%; padding: 25px 0;">
			<view class="nr-ii flex" style="">
				<image mode="aspectFit" style="width: 25px;height: 25px;" src="../image/zhanghao.png"></image>
				<input placeholder="账号" v-model="User" bindinput="onUser" style="height:25px;margin-left: 10px;width: 100%;color: #000;"></input>
			</view>
			<view class="nr-ii flex">
				<image mode="aspectFit" style="width: 25px;height: 25px;" src="../image/mima.png"></image>
				<input password placeholder="密码" v-model="Password" bindinput="onPassword" style="height:25px;margin-left: 10px; width: 100%;color: #000;"></input>
			</view>
			<view class="flex" v-if="OpenVerifi">
				<view class="nr-ii flex" style="width: 75%;margin-top: 0px;">
					<image mode="aspectFit" style="width: 25px;height: 25px;" src="../image/yanzhengma.png"></image>
					<input placeholder="验证码" v-model="Verification" bindinput="onVerify" style="height:25px;margin-left: 10px;width: 100%;color: #000;"></input>
				</view>
				<view class="yzmaj" style="">
					<view class="" @click="refresh()">
						<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
					</view>
				</view>
			</view>
			<view style="width: 100%;">
				<button class="button" @click="dl" style="margin-left: 15px;margin-right: 15px;">
					<view style="font-weight: 500;">
						<text>登 录</text>
					</view>
				</button>
			</view>
			<view style="margin-top: 30px; width: 100%;text-align: center;color: #007AFF;" @click="ANP">APN设置</view>
		</view>
	</view>
</template>
<script>
	var _this;
	var app = getApp();
	export default {
		data() {
			return {
				User: '',
				Password: '',
				Verification: '', //验证码
				verCode: "", //验证码比较值
				OpenVerifi: true, //开启验证吗
				OpenTest: false, //开启测试模式
				width: 120,
				height: 45,
			}
		},
		onLoad() {
		var xx = "理想信念、对党忠诚、意识形态、政治能力、驾驭全局、管理队伍、敢于担当、依法办事、争创一流、工作实绩、履行一岗双责、廉洁自律、理想信念、对党忠诚、意识形态、政治能力、独当一面、配合协作、敬业精神、工作作风、履职尽责、工作实绩、遵章守纪、廉洁自律、理想信念、对党忠诚、意识形态、政治能力、业务素质、工作能力、敬业奉献、主动负责、高效服务、工作实绩、遵章守纪、团队意识、廉洁自律、理想信念、对党忠诚、意识形态、政治能力、贯彻领导意图、执行力、谦虚谨慎、服务意识、遵章守纪、严格对外交往、反对“四风”、廉洁自律"
		var xx_i= xx.split("、")
		var xx_ii= ""
			xx_i.forEach(res => {
				console.log(xx_ii.indexOf(res))
				if(xx_ii.indexOf(res) == -1){
					if(xx_ii == ""){
						xx_ii=res
					}else{
						xx_ii = xx_ii+","+res
					}
				}
			})
			console.log(xx_ii)
		},
		onShow() {
			var that = this;
			setTimeout(function() {
				that.init();
			}, 200)
		},
		methods: {
			test: function() {
				this.setData({
					User: '',
					Password: '',
					Verification: this.$data.verCode
				})
			},
			ANP: function() {
				permision.requestAndroidPermission(permisionID)
				var main = plus.android.runtimeMainActivity();
				var Intent = plus.android.importClass('android.content.Intent');
				var Settings = plus.android.importClass('android.provider.Settings');
				var intent = new Intent(Settings.READ_CONTACTS);
				main.startActivity(intent);
			},
			dl: function() {
				uni.showToast({
					title: '登录中',
					icon: 'loading',
					duration: 30000
				})
				//地址切换
				if (this.$data.User.indexOf("#") != -1) {
					app.globalData.http = app.globalData.http_C
				} else if (this.$data.User.indexOf("*") != -1) {
					app.globalData.http = app.globalData.http_B
				} else {
					app.globalData.http = app.globalData.http_A
				}

				if (this.$data.Verifi) {
					if (this.$data.Verification.toLowerCase() ==
						this.$data.verCode.toLowerCase() &&
						this.$data.verCode != '' &&
						this.$data.Verification != '') {
						// this.goIndex()
					} else {
						uni.showToast({
							title: '请重新输入验证码',
							icon: 'none'
						})
					}
				} else {
					uni.hideToast();
					uni.reLaunch({
						url: '/pages/index/index'
					})
					// this.goIndex()
				}
			},
			goIndex: function() {
				var that = this
				var params = {
					username: that.$data.User.replace("#", ""),
					password: that.$md5(that.$md5(that.$data.Password).toLocaleUpperCase()).toLocaleUpperCase()
				}
				var sucessFun = function(res) {
					uni.hideToast();
					if (res.resultdata != null) {
						uni.reLaunch({
							url: '/pages/homepage/index'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					}
				}
				var errorFun = function(err) {
					uni.hideToast();
					if (err.errMsg == 'request:fail') {
						uni.showToast({
							title: "网络异常",
							icon: 'none',
							duration: 3000
						})
					}
				}
				app.POST()("/login", params, sucessFun, errorFun)
			},
			init: function() {
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "G", "M", "N", "P", "Q", "R", "T",
						"U", "V", "W", "Y", "3", "4", "6", "8", "9", "A", "B", "C", "D", "E", "F", "G",
						"H", "J", "K", "G", "M", "N", "P", "Q", "R", "T", "U", "V", "W", "Y", "3",
						"4", "6", "8", "9"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});

				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				this.$data.verCode = str
				if (this.$data.OpenTest) {
					this.test();
				}
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.init();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style>
	.yzmaj {
		width: 50%;
		margin-left: 0px;
		margin-right: 15px;
		padding-left: 20rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.flex {
		display: flex;
		flex-direction: row;
	}

	.user {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}

	.button {
		background: #2072F0;
		border-radius: 5px;
		color: #fff;
		font-size: 18px;

	}

	.nr-i {
		padding: 25rpx;
	}

	.nr-ii {
		margin-top: 10px;
		margin-left: 15px;
		margin-right: 15px;
		background: #fff;
		padding: 20rpx;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	.yzm {
		width: 100px;
	}
</style>
